@import '../../style/_variables.less';

.mooli-captcha {
  position: relative;
  touch-action: none;
  &--panel {
    // display: flex;
    // position: relative;
    // width: 100%;
    // height: 100%;
    // border-radius: 10px;
    padding-bottom: 15px;
    &--placeholder {
      pointer-events: auto;
      position: relative;
      padding-top: 50%;
    }
    &--bg-slider {
      pointer-events: auto;
      position: absolute;
      top: 0;
      left: 0;
      // width: 100%;
      // height: 100%;
      > img {
        user-select: none;
        pointer-events: none;
      }
    }
    &--bg-img {
      width: 100%;
    }
    &--slider-img {
      position: absolute;
      top: 0;
      left: 0;
      // width: auto;
      // height: 100%;
    }
    &--refresh {
      position: absolute;
      top: 9px;
      right: 9px;
      width: 25px;
      height: 25px;
      background: url('')
        center center no-repeat;
      background-size: 100% auto;
    }
    &--loading.mooli-overlay {
      position: absolute;
      top: 0;
      left: 0;
      background: #f5f5f5;
    }
    &--loading-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }
  &--control {
    position: relative;
    margin-top: 25px;
    width: 100%;
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(
      90deg,
      rgb(254, 208, 0) 0%,
      rgb(254, 182, 0) 100%
    );
    &--gray {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 9px;
      padding-left: 4px;
      border-radius: 5px;
      > em {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        background-color: rgb(245, 245, 245);
      }
    }
    &--button {
      position: absolute;
      top: -16px;
      left: 0;
      width: 42px;
      height: 42px;
      position: absolute;
      background: url('')
        left center no-repeat;
      background-size: 100% auto;
    }
  }
}
